<template>
    <div class="wrapper">
        <title-name :title="processName + '-' + taskName"></title-name>
        <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
            <title-name title="岗位信息"></title-name>
            <a-descriptions title="">
                <a-descriptions-item label="当前岗位">
                    {{ taskName }}
                </a-descriptions-item>
                <a-descriptions-item label="审批人">
                    {{ currentUser.name }}
                </a-descriptions-item>
                <a-descriptions-item label="审批时间">
                    {{ currentTime }}
                </a-descriptions-item>
            </a-descriptions>

            <title-name title="审批意见"></title-name>
            <a-form ref="form1">
                <a-row :gutter="24">
                    <a-col :md="24" :sm="24">
                        <a-form-item>
                            <BaseInput
                                v-model="opinions"
                                style="width: 100%"
                                placeholder="请填写意见"
                                type="textarea"
                            ></BaseInput>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24" class="overfloat">
                    <a-col>
                        <div class="floatRight">
                            <!-- <a-button type="success" style="margin-right: 20px;" @click="handleDetail" v-if="!!detailUrl">查看详情</a-button>
            <a-button type="primary" style="margin-right: 20px;" @click="handelUnApproval">审批不通过</a-button> -->
                            <a-button type="primary" @click="handelApproval">提交意见</a-button>
                        </div>
                    </a-col>
                </a-row>
            </a-form>
            <title-name title="信息详情"></title-name>
            <a-descriptions class="mb20" title="">
                <a-descriptions-item label="名称">
                    <span>{{ form.name }}</span>
                </a-descriptions-item>
                <a-descriptions-item label="所属项目">
                    <span>{{ form.projectName }}</span>
                </a-descriptions-item>
                <a-descriptions-item label="所属分公司">
                    <span>{{ form.branchComName }}</span>
                </a-descriptions-item>
                <a-descriptions-item label="分包商名称">
                    <span>{{ form.subContractorName }}</span>
                </a-descriptions-item>
                <a-descriptions-item label="编号">
                    <span>{{ form.number }}</span>
                </a-descriptions-item>
                <a-descriptions-item label="施工范围">
                    <span>{{ form.constructionRange }}</span>
                </a-descriptions-item>
            </a-descriptions>

            <template>
                <title-name title="部门意见信息"></title-name>
                <div class="btns-wrapp mb20">
                    <a-button type="primary" @click="visibleState.auditProcess = true">审批流程图</a-button>
                </div>
                <a-spin tip="部门意见加载中..." :spinning="flowRequesting">
                    <a-table :columns="columnApprove" :data-source="approveInfos" bordered>
                        <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
                        <template slot="opinions" slot-scope="text, record, index">
                            <a-tooltip placement="topLeft">
                                <template slot="title">
                                    <span> {{ text }}</span>
                                </template>
                                <span> {{ text }}</span>
                            </a-tooltip>
                        </template>
                    </a-table>
                </a-spin>
            </template>
            <ApprovalDetails
                :title="'审批流程信息'"
                :businessId="this.id"
                :visible="visibleState.auditProcess"
                @cancel="visibleState.auditProcess = false"
                @confirm="visibleState.auditProcess = false"
            />
            <!-- <title-name title="部门意见信息"></title-name>
            <a-spin tip="部门意见加载中..." :spinning="flowRequesting">
                <a-table :columns="columnApprove" :data-source="approveInfos" bordered>
                    <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
                </a-table>
            </a-spin> -->
        </a-card>
    </div>
</template>

<script>
import ApprovalDetails from '@/components/approvalDetails'
import FooterToolBar from '@/components/FooterToolbar'
import { getProcessNodeList, completeTask } from '@/api/process'
import { getOrgEmployeesListBy } from '@/api/commons'
import moment from 'moment'
import { getStepOneDetail } from '@/api/businessAffairs/sml'
import Vue from 'vue'

const columnApprove = [
    {
        title: '序号',
        width: 80,
        scopedSlots: { customRender: 'serial' },
    },
    {
        title: '审批人',
        dataIndex: 'userName',
    },
    {
        title: '审批时间',
        dataIndex: 'createTime',
    },
    {
        title: '岗位名称',
        dataIndex: 'taskName',
    },
    {
        title: '滞留时间',
        dataIndex: 'durationInMillis',
    },
    {
        title: '岗位意见',
        dataIndex: 'formData.opinions',
    },
]

export default {
    name: 'Approval',
    components: {
        FooterToolBar,
        ApprovalDetails,
    },
    props: {
        text: String,
    },
    data() {
        return {
            visibleState: {
                auditProcess: false,
            },
            form: {}, //基本信息详情
            columnApprove,
            opinions: '',
            approveInfos: [], // 审批流程信息
            procInstId: '', //当前流程实例ID
            taskId: '', //当前流程岗位ID
            processName: '', //流程名称
            taskName: '', //当前流程岗位名称
            taskDefKey: '', //任务标识
            currentTime: '', //当前审批时间
            currentUser: '', //当前审批人
            flowRequesting: false,
            detailUrl: null, //详情地址

            assignType: '', //节点类型   0 变量获取 1 处理人 2 候选人 3 候选组 4 会签
            assignCode: '', //候选组编码 岗位编码
            assignLevel: '', //层级 项目部 PD 分公司 BC 公司 CO
            businessType: '', //业务类型 0 项目
        }
    },
    created() {
        const {
            type,
            code,
            level,
            btype,
            businessId,
            procInstId,
            name,
            processName,
            detailUrl,
            taskId,
            taskDefKey,
        } = this.$route.query
        if (type) {
            this.assignType = type
            this.assignCode = code
            this.assignLevel = level
            this.businessType = btype
        }
        this.id = businessId
        if (!this.id) {
            this.$error({ content: '无指定业务ID，将自动关闭' })
            setTimeout(() => {
                window.close()
            }, 1500)
            return
        }
        this.procInstId = procInstId
        this.taskName = decodeURIComponent(name)
        this.processName = decodeURIComponent(processName)
        document.title = this.processName + '-' + this.taskName
        if (detailUrl) {
            this.detailUrl = decodeURIComponent(detailUrl)
        }
        this.taskId = taskId
        this.taskDefKey = taskDefKey
        this.currentTime = moment().format('yyyy-MM-DD HH:mm')
        this.currentUser = Vue.getAcloudProvider().getUserInfo()
        //获取流程岗位执行情况
        this.getProcessNodes()
        //获取分包计量详情
        this, this.getSmlDetail()
    },
    computed: {},
    methods: {
        handleDetail() {
            // const token = Vue.getAcloudProvider().getAccessToken();
            let routeData = this.$router.resolve({ path: this.detailUrl, query: { businessId: this.id } })
            window.open(routeData.href, '_blank')
        },
        getSmlDetail() {
            getStepOneDetail({ id: this.id }).then((res) => {
                console.log(res)

                this.form = res.data
            })
        },

        getProcessNodes() {
            this.flowRequesting = true
            getProcessNodeList({ procInstId: this.procInstId, pageNo: 1, pageSize: 100 })
                .then((res) => {
                    if (res.code === 200) {
                        const data = res.data
                        const userIds = data.map((d) => {
                            if (d.formData) {
                                d.formData = JSON.parse(d.formData)
                            }
                            return d.assignee
                        })
                        getOrgEmployeesListBy({ userIds }).then((employees) => {
                            this.flowRequesting = false
                            res.data.forEach((r) => {
                                employees.data.some((e) => {
                                    if (e.userId === r.assignee) {
                                        r.userName = e.name
                                        return true
                                    }
                                })
                            })
                            this.approveInfos = res.data
                        })
                    }
                })
                .catch(() => {
                    this.flowRequesting = false
                })
        },
        submit(reject) {
            const data = {
                formData: {
                    opinions: this.opinions,
                    reject,
                },
                procInstId: this.procInstId,
                taskId: this.taskId,
                userId: this.currentUser.id,
            }
            if (reject) {
                data['variables'] = { reject: true }
            }
            return completeTask(data)
                .then((res) => {
                    if (res.status === 200) {
                        // this.$success({
                        //     content: '审批提交成功，即将自动关闭当前窗口',
                        //     onOk() {
                                window.close()
                        //     },
                        // })
                        // setTimeout(() => {
                        //     window.close()
                        // }, 2000)
                    } else {
                        this.$error({ content: '审批提交失败，请稍后重试' })
                    }
                    return res
                })
                .catch((err) => {
                    return err
                })
        },
        handelUnApproval() {
            // 审批不通过
            const _this = this
            if (!_this.opinions) {
                _this.$warning({ content: '请填写审批意见' })
                return
            }
            const confirmWin = this.$confirm({
                title: '警告提醒！',
                content: '确定审批不通过？',
                okType: 'danger',
                onOk() {
                    return new Promise((resolve, reject) => {
                        _this
                            .submit(true)
                            .then(() => {
                                resolve()
                                confirmWin.destroy()
                            })
                            .catch(() => reject)
                    }).catch(() => this.$error({ content: '审批提交失败，请稍后重试' }))
                },
                onCancel() {},
            })
        },

        handelApproval() {
            // 审批通过
            const _this = this
            const confirmWin = this.$confirm({
                title: '警告提醒！',
                content: '确定填写该意见？',
                okType: 'danger',
                onOk() {
                    return new Promise((resolve, reject) => {
                        _this
                            .submit(false)
                            .then(() => {
                                resolve()
                                confirmWin.destroy()
                            })
                            .catch(() => reject)
                    }).catch(() => this.$error({ content: '提交失败，请稍后重试' }))
                },
                onCancel() {},
            })
        },
    },
}
</script>

<style lang="less" scoped>
.wrapper-row {
    padding-left: 55px;
    font-weight: bold;
    letter-spacing: 1px;
}

/deep/ .ant-form-item label {
    font-size: 12px;
}

/deep/ .ant-btn {
    border-radius: 5px;
}

/deep/ .ant-input {
    /*width: 70%;*/
    border-radius: 5px;
}

/deep/ .ant-card.ant-card-bordered {
    border-radius: 5px;
}

.ant-avatar-lg {
    width: 48px;
    height: 48px;
    line-height: 48px;
}

.list-content-item {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 40px;
    span {
        line-height: 20px;
    }
    p {
        margin-top: 4px;
        margin-bottom: 0;
        line-height: 22px;
    }
}

.title-name {
    border-left: 5px solid #1890ff;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 20px;
    padding-left: 15px;
    height: 20px;
    line-height: 20px;
}

/deep/ .table-page-search-wrapper .ant-form-inline .ant-row .ant-col.ant-col-sm-24.ant-col-md-12 {
    padding-left: 80px;
}
// /deep/ .ant-form-item .ant-form-item-control-wrapper {
//     width: 100%;
// }
// /deep/ .col .ant-form-item .ant-form-item-control-wrapper {
//     width: calc(100% - 135px);
// }
// /deep/ .detail .col .ant-form-item .ant-form-item-control-wrapper{
//     width: auto!important;;
// }
</style>

